import React, { Component } from 'react';
import { Button, Card, Col, Row } from 'antd';
import moment from 'moment';
import JsBarcode  from 'jsbarcode';
import { fetchData, getWmsRestRoot } from '../../components/AjaxConsumer'


const tracking_print_button = {
    position: 'fixed',
    right: '10%',
    top: '20px',
}

let time = null;

export default class NewPrintBarCode extends Component {

    constructor(props) {
        super(props);
        this.state = {
            codeList: ['BM03H1EA50HSIK7H0001', 'BM03H1EA50HSIK7H0002'], //条码列表
            dataList: [],
            isPrint: true
        }
    }


    componentDidMount() {
        $("body").removeClass("baseWidthSet");

        const barcode= this.props.location.query.barcodes;
        console.log(barcode);
        const options = {
            url: '/product/probarcode/printListSn?barcode=' +barcode,
            type: 'get',
            condition: {}
        };
        fetchData(this, options, (res) => {
            //回调函数
            const pagination = { ...this.state.pagination };
            pagination.total = res.data.totalCount;
            console.log(res.data);
            this.setState({
                dataList: res.data,
            });

            res.data.map((item, index) => {
                JsBarcode(this[`barcode${index}`], item.barcode, {
                    displayValue: true, // 是否由Barcode显示二维码下面的值
                    // text: "库位编码：" + item + "\r\n库位层数：" + item,
                    width: 2.32, // 每条线的宽度
                    height: 30, // 高度
                    margin: 10, //边距
                    textAlign: "center", //label 值靠右
                    fontOptions: "bold",
                    font: "黑体" //SimHei
                });
            })
        })

    }


    print = () => {
        //document.getElementsByTagName("body").classList.remove("baseWidthSet");
        this.setState({ isPrint: false }, () => {
            //document.body.innerHTML=document.getElementById('div1').innerHTML;

            window.print();
            this.setState({ isPrint: true });
        });
    }

    render() {
        const { dataList, isPrint } = this.state;
        const list = [1];//this.props.location.state;
        return (
            <div id='div1'>
                {
                    isPrint ?
                        (
                            <div style={tracking_print_button}>
                                <Button type="primary" onClick={this.print}>打印</Button>
                            </div>
                        )
                        : null
                }
                {

                    dataList.map((item, index) => {
                        return (
                            <div className="print-A4-page" key={index}>
                                <div className="print-table-page">
                                    <table>
                                        <tr>
                                            <td width="62%">{item.productName}</td>
                                            <td width="38%"></td>
                                        </tr>
                                        <tr>
                                            <td width="62%">{item.density}</td>
                                            <td width="38%"></td>
                                        </tr>
                                        <tr>
                                            <td width="62%">{item.spec}</td>
                                            <td width="38%"></td>
                                        </tr>
                                        <tr>
                                            <td width="62%">{item.weight}</td>
                                            <td width="38%"></td>
                                        </tr>
                                        <tr>
                                            <td width="62%"><svg ref={(ref) => { this[`barcode${index}`] = ref; }}/></td>
                                            <td width="38%"></td>
                                        </tr>
                                        {/* <tr>
                                            <td colspan="2">222</td>
                                        </tr> */}
                                    </table>
                                </div>
                            </div>
                        )
                    })
                }
            </div>

        )
    }
}
